import React, { Component } from 'react';
import { Form, Input, Space, Button } from 'antd';
import TheTable from '@/components/TheTable';
import TheButton from '@/components/TheButton';
import TheDialog from '@/components/TheDialog';
import { apiGetCancelCauseList, apiGetCancelCauseAdd, apiGetCancelCauseEdit, apiGetCancelCauseDel } from '@/request/petTaxi';

export default class CancelReason extends Component {
  state = {
    columns: [
      {
        title: '取消原因',
        dataIndex: 'cause',
        key: 'cause'
      },
      {
        title: '操作',
        render: (text, record) => {
          return <>
            <TheButton haspermi={['taxi:reason:delete']} onClick={() => this.delConfirm(record)}>删除</TheButton>
            <TheButton haspermi={['taxi:reason:edit']} onClick={() => this.dialogEdit(record)}>编辑</TheButton>
          </>
        }
      }
    ],
    dataSource: [],
    visible: false,
    title: '',
    editValue: {},
    type: ''
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    let res = await apiGetCancelCauseList()
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data
      })
    }
  }
  dialogAdd = () => {
    this.setState({
      visible: true,
      title: '新建',
      editValue: {},
      type: 'add'
    })
  }
  dialogEdit = value => {
    this.setState({
      visible: true,
      title: '编辑',
      editValue: value,
      type: 'edit'
    })
  }
  dialogClose = () => {
    this.setState({
      visible: false,
      title: '',
      editValue: {},
      type: ''
    })
  }
  dialogSave = async (value) => {
    const { type, editValue } = this.state
    if (type === 'add') {
      let res = await apiGetCancelCauseAdd({ ...value })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '新增成功'
        })
        this.dialogClose()
        this.getData()
      }
    }
    if (type === 'edit') {
      value.routeCancelCauseId = editValue.routeCancelCauseId
      let res = await apiGetCancelCauseEdit({ ...value })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '修改成功'
        })
        this.dialogClose()
        this.getData()
      }
    }
  }
  delConfirm = value => {
    React.$confirm({
      title: '您确认删除此条信息吗？',
      onOk: async () => {
        let res = await apiGetCancelCauseDel({ routeCancelCauseId: value.routeCancelCauseId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      }
    })
  }
  render() {
    const { columns, dataSource, title, visible, editValue } = this.state
    return (
      <div className='p-layout-box'>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <TheButton size="middle" type="default" haspermi={['taxi:reason:add']} onClick={this.dialogAdd}>新建</TheButton>
        </div>
        <div className="p-layout-content">
          <TheTable columns={columns} dataSource={dataSource} />
        </div>
        <TheDialog
          title={title}
          visible={visible}
          footer={null}
          width={400}
          handleCancel={this.dialogClose}
        >
          <Form onFinish={this.dialogSave} initialValues={editValue}>
            <Form.Item label="取消原因" name="cause" rules={[{ required: true }]}>
              <Input maxLength={8} />
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.dialogClose}>取消</Button>
                  <Button type="primary" htmlType='submit'>保存</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
      </div>
    )
  }
}
